<template>
	<view class="gauge" ref="gaugeRef" :style="{ ...customStyle }"></view>
</template>

<script setup>
	import echarts from "@/echarts/index.js";
	import { ref,watch,onMounted } from 'vue';
	let gaugeRef = ref(null);
	let gaugeEchartInstance = ref(null);

	let props = defineProps({
		value: {
			type: Number,
			default: 0,
		},
		min: {
			type: Number,
			default: 0,
		},
		max: {
			type: Number,
			default: 100,
		},
		text: {
			type: String,
		},
		customStyle: {
			type: Object,
			default () {
				return {};
			},
		},
	});
	let option = ref({
		tooltip: {
			formatter: "{a} <br/>{b} : {c}r/min",
		},
		series: [{
			name: "Pressure",
			type: "gauge",
			radius:"100%",
			min: props.min,
			max: props.max,
			pointer:{
				width:8,
			},
			axisLine:{
				lineStyle:{
					width:10
				}
			},
			progress: {
				show: true,
				width:10,
				itemStyle:{
					 borderWidth:0
				}
			},
			splitNumber: 8,
			splitLine: {
				length: 0,
				lineStyle: {
					color: "#999",
				},
			},
			detail: {
				color: "#999",
				fontSize: 12,
				offsetCenter: [0, 60],
				valueAnimation: true,
				formatter: "{value}r/min",
			},
			axisLabel: {
				color: "#999",
				fontSize: 12,
			},
			title: {
				show: true,
				fontSize: 14,
				color: "#fff",
				offsetCenter:[0,80]
			},
			data: [{
				value: props.value,
				name: props.text,
			}, ],
		}, ],
	});
	watch(
		() => props.value,
		(newVal, oldVal) => {
			option.value.series[0].data[0].value = newVal;
			handleDrawGauge();
		}
	);
	const handleDrawGauge = () => {
		gaugeEchartInstance.value.setOption(option.value);
	};
	onMounted(() => {
		gaugeEchartInstance.value = echarts.init(gaugeRef.value?.$el);
		handleDrawGauge();
	});
</script>

<style  lang="scss">
	.gauge {
		width: 200rpx;
		height: 200rpx;
	}
</style>